<template>
    <transition name="fadeOut" mode="out-in">
        <div class="list">
            <ul>
                <li v-for="item in list.data">
                    <router-link to="/article">
                        <h1>{{item.user_info.nickname}}</h1>
                       
                        <div class="img">
                            加载中
                             <img alt="" v-lazy='item.user_info.headimgurl' v-lazy:background-image="item.user_info.headimgurl" >
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </transition>
</template>
<script>
import Vue from 'vue'
import AJAXURL from "../ajaxurl.js"
export default {
    name: "vue-lazy-loader",
    data() {
        return {
            list: {
                "code": 0,
                "data": [],
                "msg": "",
                "page": 1
            }
        }
    },
    created: function() {
        Vue.http.get(AJAXURL.list).then((response) => {
            this.list.data = this.list.data.concat(response.data.data);
            this.$nextTick(function() {
                
            })
        })
        let _this=this;
        this.$Lazyload.$on('loaded',function(listener) {
                 //   console.table(_this.$Lazyload.performance())
        })

    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list {
    background: #fff;
    position: absolute;
    width: 100%;
}

h1,
h2 {
    font-weight: normal;
    float: left;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: block;
    border-bottom: 1px solid #ccc;
    margin: 0 10px;
}

li::after {
    content: '';
    clear: both;
    display: block;
}

img {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    left:0;
    top:0;
    z-index:10;
    opacity: 0;
   transition:  opacity 1s;
   
}
.img{
     float: right;
     width: 100px;
    height: 100px;
    background: #666;
    position: relative;
    text-align: center;
    line-height: 100px;
    color:#fff;
}

a {
    color: #42b983;
    display: block;
}

  img[lazy=loading] {
   
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
    opacity: 1;
  }
</style>
